<template>
    <div class="box">
        <div class="corner topLeft"></div>
        <div class="rightTop" v-if="sub">
            <div class="text">
                <slot name="rightTop">月</slot>
            </div>
        </div>
        <div class="corner topRight" v-else></div>
        <div class="corner bottomRight"></div>
        <div class="corner bottomLeft"></div>
        <template v-if="border">
            <div class="border top"></div>
            <div class="border bottom"></div>
        </template>
        <slot></slot>
    </div>
</template>
<script setup>
defineProps({
    border: {
        type: Boolean,
        default: false
    },
    sub: {
        type: Boolean,
        default: false
    }
})
</script>
<style lang="scss" scoped>
.box {
    width: 100%;
    height: 100%;
    position: relative;
    background: linear-gradient(90deg, rgba(10, 43, 50, 1) 0%, rgba(15, 61, 73, 1) 47.92%, rgba(10, 43, 50, 1) 100%);

    .rightTop {
        $s: 63px;
        box-sizing: border-box;
        width: $s;
        height: $s;
        border-left: $s solid transparent;
        border-bottom: $s solid transparent;
        border-top: $s solid rgb(4, 206, 203);
        position: absolute;
        right: 0;
        top: 0;

        .text {
            width: $s;
            height: $s;
            line-height: $s;
            transform: translateY(-$s * 1.26) translateX(-$s * 0.76);
            text-align: center;
            color: #fff;
            font-weight: 600;
            font-size: 18px;
        }
    }

    .corner {
        position: absolute;
        width: 20px;
        height: 20px;
        $borderStyle: 1px solid rgb(4, 206, 203);

        &[class*=Left] {
            border-left: $borderStyle;
            left: 0;
        }

        &[class*=Right] {
            border-right: $borderStyle;
            right: 0;
        }

        &[class*=top] {
            border-top: $borderStyle;
            top: 0;
        }

        &[class*=bottom] {
            border-bottom: $borderStyle;
            bottom: 0;
        }
    }

    .border {
        position: absolute;
        background: linear-gradient(90deg, rgba(1, 148, 145, 0) 0%, rgba(1, 148, 145, 1) 49.31%, rgba(1, 148, 145, 0) 100%);
        height: 4px;
        left: 0;
        width: 100%;

        &.top {
            top: 0;
        }

        &.bottom {
            bottom: 0;
        }
    }
}
</style>